<template>
  <div class="page">
    <div class="btn-towxpay" @click="toWxpay"></div>
    <div class="box-step">
      <el-steps :active="1" align-center finish-status="success">
        <el-step title="选择主体类型" />
        <el-step title="填写资料" />
        <el-step title="审核结果" />
      </el-steps>
    </div>

    <div class="form">
      <van-form @submit="onSubmit">
        <div class="form-block-hd"><span>基础信息</span></div>
        <div class="form-block">
          <h2 class="form-block__title">选择服务商</h2>
          <van-field
            v-model="server_name"
            is-link
            readonly
            label=""
            placeholder="请选择服务商"
            :rules="[{ required: true, message: '' }]"
            @click="showPickerServer = true"
          />
          <van-popup v-model="showPickerServer" round position="bottom">
            <van-picker
              title="选择服务商"
              show-toolbar
              :columns="serverArr"
              @confirm="onConfirmServer"
              @cancel="showPickerServer = false"
            />
          </van-popup>

          <h2 class="form-block__title">选择行业</h2>
          <van-field
            v-model="trade_title"
            is-link
            readonly
            label=""
            placeholder="请选择行业"
            :rules="[{ required: true, message: '' }]"
            @click="showPickerTrade = true"
          />
          <van-popup v-model="showPickerTrade" round position="bottom">
            <van-picker
              title="请选择行业"
              show-toolbar
              :columns="tradeArr"
              @confirm="onConfirmTrade"
              @cancel="showPickerTrade = false"
            />
          </van-popup>

          <div v-if="rateArr && rateArr.length>0 && [703, 716, 717, 719, 721, 725, 727].includes(form.settlement_id)">
            <h2 class="form-block__title">使用优惠费率</h2>
            <van-field
              v-model="activities_rate"
              is-link
              readonly
              label=""
              placeholder="请选择费率"
              :rules="[{ required: true, message: '' }]"
              @click="showPickerRate = true"
            />
            <van-popup v-model="showPickerRate" round position="bottom">
              <van-picker
                title="选择费率"
                show-toolbar
                :columns="rateArr"
                @confirm="onConfirmRate"
                @cancel="showPickerRate = false"
              />
            </van-popup>
          </div>

          <div v-if="qualifications_desc">
            <h2 class="form-block__title">特殊资质（最多5张）</h2>
            <van-uploader
              v-model="qualifications"
              multiple
              :after-read="doUploadQualifications"
              :max-count="5"
            />
            <div class="desc" v-html="qualifications_desc" />
          </div>
        </div>

        <div class="form-block-hd"><span>主体资料</span></div>
        <div class="form-block">
          <h2 class="form-block__title">营业执照（<span v-if="form.subject_type === 'SUBJECT_TYPE_INDIVIDUAL'">个体户</span><span v-if="form.subject_type === 'SUBJECT_TYPE_ENTERPRISE'">企业</span>）</h2>
          <van-uploader v-model="yyzzList" :after-read="doUploadYyzz" :max-count="1" />
          <div class="desc">已接入营业执照自动识别服务</div>
          <h2 class="form-block__title">商户名称</h2>
          <van-field
            v-model="form.merchant_name"
            placeholder="请输入营业执照上的企业全称"
            :rules="[{ required: true, message: '' }]"
          />
          <div class="desc">如果营业执照上没有名字，则填“个体户+姓名”，如“个体户张三”</div>
          <h2 class="form-block__title">统一信用代码</h2>
          <van-field
            v-model="form.license_number"
            placeholder="请输入营业执照上的统一信用代码"
            :rules="[{ required: true, message: '' }]"
          />
          <div class="desc">请仔细核对，确保无误</div>
          <h2 class="form-block__title">法人姓名</h2>
          <van-field
            v-model="form.legal_person"
            placeholder="请输入营业执照上的法人姓名"
            :rules="[{ required: true, message: '' }]"
          />
          <h2 class="form-block__title">商户简称</h2>
          <van-field
            v-model="form.merchant_shortname"
            placeholder="请输入商户简称"
            :rules="[{ required: true, message: '' }]"
          />
          <div class="desc">在支付完成页向买家展示，需与微信经营类目相关</div>
          <h2 class="form-block__title">客服电话</h2>
          <van-field
            v-model="form.service_phone"
            placeholder="请输入客服电话"
            :rules="[{ required: true, message: '' }]"
          />
          <div class="desc">将在交易记录中向买家展示，提供咨询服务</div>
        </div>

        <div class="form-block-hd"><span>法人身份证件</span></div>
        <div class="form-block">
          <h2 class="form-block__title">身份证人像面照片</h2>
          <van-uploader v-model="id_card_copy" :after-read="doUploadIdcardCopy" :max-count="1" />
          <div class="desc">已接入身份证自动识别服务</div>
          <h2 class="form-block__title">身份证国徽面照片</h2>
          <van-uploader v-model="id_card_national" :after-read="doUploadIdcardNational" :max-count="1" />
          <h2 class="form-block__title">身份证姓名</h2>
          <van-field
            v-model="form.id_card_name"
            placeholder="请输入身份证上的姓名"
            :rules="[{ required: true, message: '' }]"
          />
          <h2 class="form-block__title">身份证号码</h2>
          <van-field
            v-model="form.id_card_number"
            placeholder="请输入身份证号码"
            :rules="[{ required: true, message: '' }]"
          />

          <h2 class="form-block__title">身份证生效日期</h2>
          <van-field
            v-model="form.card_period_begin"
            is-link
            readonly
            label=""
            placeholder="请选择日期"
            @click="showPickerIdcardTimeStart = true"
          />
          <van-popup v-model="showPickerIdcardTimeStart" round position="bottom">
            <van-datetime-picker
              v-model="card_period_begin"
              type="date"
              title="选择年月日"
              :min-date="minDateStart"
              @confirm="onPickerIdcardTimeStartFinish"
              @cancel="showPickerIdcardTimeStart = false"
            />
          </van-popup>
          <h2 class="form-block__title">身份证失效日期</h2>
          <div class="box-input">
            <van-radio-group v-model="card_period_end_type" direction="horizontal">
              <van-radio name="非长期" shape="square">非长期</van-radio>
              <van-radio name="长期" shape="square">长期</van-radio>
            </van-radio-group>
          </div>
          <div v-if="card_period_end_type==='非长期'">
            <van-field
              v-model="form.card_period_end"
              is-link
              readonly
              label=""
              placeholder="请选择失效日期"
              @click="showPickerIdcardTimeEnd = true"
            />
            <van-popup v-model="showPickerIdcardTimeEnd" round position="bottom">
              <van-datetime-picker
                v-model="card_period_end"
                type="date"
                title="选择年月日"
                :min-date="minDateEnd"
                @confirm="onPickerIdcardTimeEndFinish"
                @cancel="showPickerIdcardTimeEnd = false"
              />
            </van-popup>
          </div>
          <h2 class="form-block__title">手机号码</h2>
          <van-field
            v-model="form.mobile_phone"
            placeholder="请输入手机号码"
            :rules="[{ required: true, message: '' }]"
          />
          <div class="desc">用于接收微信支付的重要管理信息及日常操作验证码</div>
          <h2 class="form-block__title">联系邮箱</h2>
          <van-field
            v-model="form.contact_email"
            placeholder="请输入联系邮箱"
            :rules="[{ required: true, message: '' }]"
          />
          <div class="desc">用于接收微信支付的开户邮件，及日常业务通知</div>
        </div>

        <div class="form-block-hd"><span>经营信息</span></div>
        <div class="form-block">
          <h2 class="form-block__title">门店名称</h2>
          <van-field
            v-model="form.biz_store_name"
            placeholder="请填写门店名称"
            :rules="[{ required: true, message: '' }]"
          />
          <h2 class="form-block__title">门店省市</h2>
          <van-field
            v-model="store_city"
            is-link
            readonly
            label=""
            placeholder="请选择所在省市"
            @click="showPickerStoreCity = true"
          />
          <van-popup v-model="showPickerStoreCity" round position="bottom">
            <van-cascader
              v-model="form.biz_address_code"
              title="请选择所在地区"
              :options="cityArr"
              @close="showPickerStoreCity = false"
              @finish="onPickerStoreCityFinish"
            />
          </van-popup>
          <h2 class="form-block__title">门店详细地址</h2>
          <van-field
            v-model="form.biz_store_address"
            placeholder="门店详细地址"
            :rules="[{ required: true, message: '' }]"
          />
          <div class="desc">如果有多个场所，只需填写其中一个</div>

          <h2 class="form-block__title">门店门口照片</h2>
          <van-uploader v-model="store_entrance_pic" :after-read="doUploadStoreImg" :max-count="1" />
          <div class="desc">门店场所：提交门店门口照片，要求招牌清晰可见</div>
          <div class="desc">流动经营/便民服务：提交经营/服务现场照片</div>

          <h2 class="form-block__title">店内环境照片</h2>
          <van-uploader v-model="indoor_pic" :after-read="doUploadIndoorImg" :max-count="1" />
          <div class="desc">门店场所：提交店内环境照片</div>
          <div class="desc">流动经营/便民服务：可提交另一张经营/服务现场照片</div>
        </div>

        <div class="form-block-hd"><span>银行信息</span></div>
        <div class="form-block">
          <h2 class="form-block__title">账户类型</h2>
          <div class="box-input">
            <van-radio-group v-model="form.bank_account_type" direction="horizontal">
              <van-radio v-if="form.subject_type === 'SUBJECT_TYPE_INDIVIDUAL'" name="BANK_ACCOUNT_TYPE_PERSONAL" shape="square">法人个人银行账户</van-radio>
              <van-radio name="BANK_ACCOUNT_TYPE_CORPORATE" shape="square">对公银行账户</van-radio>
            </van-radio-group>
          </div>
          <h2 class="form-block__title">开户名称</h2>
          <van-field
            v-model="form.account_name"
            placeholder="与身份证上的名字一致"
            :rules="[{ required: true, message: '' }]"
          />
          <h2 class="form-block__title">开户地</h2>
          <van-field
            v-model="bank_city"
            is-link
            readonly
            label=""
            placeholder="请选择开户银行支行省市"
            :rules="[{ required: true, message: '' }]"
            @click="showPickerBankCity = true"
          />
          <van-popup v-model="showPickerBankCity" round position="bottom">
            <van-cascader
              v-model="form.bank_address_code"
              title="请选择所在地区"
              :options="cityArr"
              @close="showPickerBankCity = false"
              @finish="onPickerBankCityFinish"
            />
          </van-popup>
          <h2 class="form-block__title">开户银行</h2>
          <van-field
            v-model="form.account_bank"
            is-link
            readonly
            label=""
            placeholder="请选择开户银行"
            :rules="[{ required: true, message: '' }]"
            @click="showPickerBank = true"
          />
          <van-popup v-model="showPickerBank" round position="bottom">
            <van-picker
              title="请选择开户银行"
              show-toolbar
              :columns="bankArr"
              @confirm="onConfirmBank"
              @cancel="showPickerBank = false"
            />
          </van-popup>
          <div v-if="form.account_bank === '其他银行'">
            <h2 class="form-block__title">开户银行全称（含支行）</h2>
            <van-field
              v-model="form.bank_name"
              placeholder="请输入开户银行全称（含支行）"
              :rules="[{ required: true, message: '' }]"
            />
          </div>
          <h2 class="form-block__title">银行账号</h2>
          <van-field
            v-model="form.account_number"
            placeholder="请输入银行账号"
            :rules="[{ required: true, message: '' }]"
          />
        </div>

        <div style="margin: 30px 16px;">
          <van-button round block type="info" native-type="submit">确认无误，提交审核</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>
<script>
import { Form, Field, Uploader, Popup, RadioGroup, Radio, Button, Picker, Cascader, DatetimePicker } from 'vant'
import { getInitData, getLastForm, uploadSfz, uploadImage, doSubmit, uploadYYzz } from '@/api/h5/jinjian_wxpay'

export default {
  name: 'H5JinjianWxpayForm',
  components: {
    VanForm: Form,
    VanUploader: Uploader,
    VanField: Field,
    VanPicker: Picker,
    VanRadio: Radio,
    VanRadioGroup: RadioGroup,
    VanButton: Button,
    VanPopup: Popup,
    VanCascader: Cascader,
    VanDatetimePicker: DatetimePicker
  },
  data() {
    return {
      minDateStart: new Date('2000', 0, 1),
      minDateEnd: new Date('2021', 0, 1),
      // 选择服务商
      showPickerServer: false,
      serverArr: [],
      server_name: '',
      // 选择费率
      showPickerRate: false,
      rateArr: [],
      activities_rate: '',
      // 选择行业
      showPickerTrade: false,
      tradeArr: [],
      trade_title: '',
      trade_rate: '',
      qualifications_desc: '',
      // 选择银行
      showPickerBank: false,
      bankArr: [],
      // 选择门店城市
      showPickerStoreCity: false,
      store_city: '',
      // 选择身份证时间-开始
      showPickerIdcardTimeStart: false,
      card_period_begin: '',
      // 选择身份证时间-结束
      showPickerIdcardTimeEnd: false,
      card_period_end: '',
      card_period_end_type: '非长期',
      // 选择银行城市
      showPickerBankCity: false,
      bank_city: '',
      // 上传营业执照
      yyzzList: [], // 营业执照图片
      qualifications: [], // 特殊资质
      // 上传门店执照
      store_entrance_pic: [],
      indoor_pic: [],
      // 上传身份证
      id_card_copy: [],
      id_card_national: [],
      // 选择城市
      cityArr: [],
      form: {
        shop_id: 0,
        subject_type: '',
        server_mch_id: '', // 服务商商户号
        settlement_id: '', // 结算规则
        qualification_type: '', // 行业名称
        activities_rate: '',
        license_copy: '', // 营业执照照片
        license_number: '', // 营业执照注册号
        merchant_name: '', // 商户名称
        legal_person: '', // 经营者姓名/法定代表人
        merchant_shortname: '', // 商户简称
        service_phone: '', // 客服电话
        biz_store_name: '', // 门店名称
        biz_address_code: '', // 门店省市区编码
        biz_store_address: '', // 门店街道名称
        store_entrance_pic: '', // 门店门口照片
        indoor_pic: '', // 店内环境照片
        mobile_phone: '', // 超级管理员手机号码
        contact_email: '', // 超级管理员联系邮箱
        id_doc_type: 'IDENTIFICATION_TYPE_IDCARD', // 类型：中国大陆居民-身份证
        id_card_copy: '', // 身份证人像面照片
        id_card_national: '', // 身份证国徽面照片
        id_card_name: '', // 身份证姓名
        id_card_number: '', // 身份证号码
        card_period_begin: '', // 身份证有效期限 - 开始
        card_period_end: '', // 身份证有效期限 - 结束
        owner: true,
        sales_scenes_type: 'SALES_SCENES_STORE', // 经营场景：线下门店
        bank_account_type: 'BANK_ACCOUNT_TYPE_CORPORATE', // BANK_ACCOUNT_TYPE_CORPORATE：对公银行账户  BANK_ACCOUNT_TYPE_PERSONAL：经营者个人银行卡
        account_name: '', // 开户名称
        account_bank: '', // 开户银行
        bank_name: '', // 开户银行全称（含支行）
        bank_address_code: '', // 开户银行省市编码
        account_number: '' // 银行账号
      }
    }
  },
  watch: {
    'form.bank_account_type'(val, oldVal) {
      if (val === 'BANK_ACCOUNT_TYPE_PERSONAL') {
        this.$set(this.form, 'account_name', this.form.legal_person)
      } else if (val === 'BANK_ACCOUNT_TYPE_CORPORATE') {
        this.$set(this.form, 'account_name', this.form.merchant_name)
      }
    },
    'card_period_end_type'(val, oldVal) {
      if (val === '非长期') {
        this.card_period_end = ''
        this.$set(this.form, 'card_period_end', '')
      } else {
        this.$set(this.form, 'card_period_end', '长期')
      }
    }
  },
  mounted() {
    const shop_id = this.$route.query.shop_id
    const subject_type = this.$route.query.subject_type
    if (shop_id) {
      this.$set(this.form, 'shop_id', shop_id)
    }
    if (subject_type) {
      this.$set(this.form, 'subject_type', subject_type)
    }
    this.getInitData()
  },
  methods: {
    getInitData() {
      getInitData({ shop_id: this.form.shop_id, subject_type: this.form.subject_type }).then(res => {
        this.serverArr = res.data.serverArr
        if (this.serverArr.length === 1) {
          this.server_name = this.serverArr[0].text
          this.form.server_id = this.serverArr[0].id
          this.form.server_mch_id = this.serverArr[0].mch_id
        }
        this.bankArr = res.data.bankArr
        this.cityArr = res.data.cityArr
        this.tradeArr = res.data.tradeArr
        this.rateMin = res.data.rateMin
        this.rateMax = res.data.rateMax
        this.makeRateArr(this.rateMin, this.rateMax)

        this.getLastForm()
      })
    },
    getLastForm() {
      getLastForm({ shop_id: this.form.shop_id, subject_type: this.form.subject_type }).then(res => {
        if (res.data.form) {
          this.form = res.data.form
          if (this.form.settlement_id) {
            this.form.settlement_id = parseInt(this.form.settlement_id)
          }
          this.rateArr
          if (this.form.qualifications) {
            var imgs = []
            for (var url of this.form.qualifications) {
              imgs.push({
                url: url,
                status: 'success',
                message: '上传成功'
              })
            }
            this.qualifications = imgs;
          }
          if (this.form.license_copy) {
            this.yyzzList = [{
              url: this.form.license_copy,
              status: 'success',
              message: '上传成功'
            }]
          }
          if (this.form.id_card_copy) {
            this.id_card_copy = [{
              url: this.form.id_card_copy,
              status: 'success',
              message: '上传成功'
            }]
          }
          if (this.form.id_card_national) {
            this.id_card_national = [{
              url: this.form.id_card_national,
              status: 'success',
              message: '上传成功'
            }]
          }
          if (this.form.store_entrance_pic) {
            this.store_entrance_pic = [{
              url: this.form.store_entrance_pic,
              status: 'success',
              message: '上传成功'
            }]
          }
          if (this.form.indoor_pic) {
            this.indoor_pic = [{
              url: this.form.indoor_pic,
              status: 'success',
              message: '上传成功'
            }]
          }
        }
        if (res.data.ext) {
          var ext = res.data.ext
          this.server_name = ext.server_name
          this.trade_title = ext.trade_title
          this.trade_rate = ext.trade_rate
          if (this.trade_rate) {
            var rateArr = this.rateArr
            rateArr[0] = {
              text: '使用行业默认费率（' + this.trade_rate + '）',
              rate: ''
            }
            this.rateArr = rateArr
          }
          this.qualifications_desc = ext.qualifications_desc
          if (this.form.activities_rate) {
            this.activities_rate = this.form.activities_rate + '%'
          }
          this.store_city = ext.store_city
          if (this.form.card_period_begin) {
            this.card_period_begin = new Date(this.form.card_period_begin)
          }
          if (this.form.card_period_end === '长期') {
            this.card_period_end_type = '长期'
          } else {
            this.card_period_end_type = '非长期'
            if (this.form.card_period_end) {
              this.card_period_end = new Date(this.form.card_period_end)
            }
          }
          this.bank_city = ext.bank_city
        }
      })
    },
    makeRateArr(rateMin, rateMax) {
      this.form.activities_rate = ''
      this.activities_rate = '使用行业默认费率（' + this.trade_rate + '）'
      var arr = [{
        text: '使用行业默认费率（' + this.trade_rate + '）',
        rate: ''
      }]
      for (var i = rateMin; i < rateMax; i++) {
        arr.push({
          text: i / 100 + '%',
          rate: i / 100
        })
      }
      this.rateArr = arr
    },
    onConfirmServer(val) {
      this.server_name = val.text
      this.form.server_id = val.id
      this.form.server_mch_id = val.mch_id
      this.showPickerServer = false
    },
    onConfirmRate(val) {
      this.form.activities_rate = val.rate
      this.activities_rate = val.text
      this.showPickerRate = false
    },
    onConfirmTrade(val) {
      this.trade_title = val.text
      this.trade_rate = val.rate
      this.form.qualification_type = val.trade
      this.form.settlement_id = val.settlement_id
      this.qualifications_desc = val.desc
      this.showPickerTrade = false
      var rate = val.rate.replace('%', '')
      rate = parseInt(parseFloat(rate) * 100)
      if (rate > 60) {
        rate = 60
      }
      this.makeRateArr(this.rateMin, rate)
    },
    onConfirmBank(val) {
      this.$set(this.form, 'account_bank', val)
      this.showPickerBank = false
    },
    doUploadYyzz(file) {
      if (!this.isImage(file)) {
        return
      }
      // 上传图片
      uploadYYzz({ content: file.content }).then(res => {
        this.$set(this.form, 'license_copy', res.data.path)
        this.$set(this.form, 'license_number', res.data.number)
        this.$set(this.form, 'merchant_name', res.data.name)
        this.$set(this.form, 'legal_person', res.data.legal_person)
        this.$set(this.form, 'biz_store_name', res.data.name)
        this.$set(this.form, 'biz_address_code', res.data.address_code)
        this.store_city = res.data.province + ' / ' + res.data.city
        this.$set(this.form, 'bank_address_code', res.data.address_code)
        this.bank_city = res.data.province + ' / ' + res.data.city
        this.$set(this.form, 'id_card_name', res.data.legal_person)
        this.$set(this.form, 'biz_store_address', res.data.address)
        if (this.form.bank_account_type === 'BANK_ACCOUNT_TYPE_PERSONAL') {
          this.$set(this.form, 'account_name', res.data.legal_person)
        } else if (this.form.bank_account_type === 'BANK_ACCOUNT_TYPE_CORPORATE') {
          this.$set(this.form, 'account_name', res.data.name)
        }
        this.$message.success('上传成功')
      })
    },
    doUploadQualifications(file) {
      if (!this.isImage(file)) {
        return
      }
      // 上传图片
      uploadImage({ content: file.content }).then(res => {
        this.$set(this.qualifications, (this.qualifications.length - 1), {
          url: res.data.path,
          status: 'success',
          message: '上传成功'
        })
      })
    },
    doUploadStoreImg(file) {
      if (!this.isImage(file)) {
        return
      }
      uploadImage({ content: file.content }).then(res => {
        this.$set(this.form, 'store_entrance_pic', res.data.path)
      })
    },
    doUploadIndoorImg(file) {
      if (!this.isImage(file)) {
        return
      }
      uploadImage({ content: file.content }).then(res => {
        this.$set(this.form, 'indoor_pic', res.data.path)
      })
    },
    doUploadIdcardCopy(file) {
      if (!this.isImage(file)) {
        return
      }
      uploadSfz({ content: file.content }).then(res => {
        this.$set(this.form, 'id_card_copy', res.data.path)
        this.$set(this.form, 'id_card_name', res.data.name)
        this.$set(this.form, 'id_card_number', res.data.idcard)
        this.$message.success('上传成功')
      })
    },
    doUploadIdcardNational(file) {
      if (!this.isImage(file)) {
        return
      }
      uploadSfz({ content: file.content }).then(res => {
        this.$set(this.form, 'id_card_national', res.data.path)
        if (res.data.valid_time_start) {
          this.card_period_begin = new Date(res.data.valid_time_start)
          this.$set(this.form, 'card_period_begin', res.data.valid_time_start)
        }
        if (res.data.valid_time_end) {
          if (res.data.valid_time_end === '长期') {
            this.card_period_end_type = '长期'
            this.$set(this.form, 'card_period_end', '长期')
          } else {
            this.card_period_end_type = '非长期'
            this.card_period_end = new Date(res.data.valid_time_end)
            this.$set(this.form, 'card_period_end', res.data.valid_time_end)
          }
        }
      })
    },
    isImage(file) {
      if (!file.content) {
        this.$message.error('请重新选择')
        // this.yyzzList = []
        return false
      }
      if (file.file.type !== 'image/png' && file.file.type !== 'image/jpeg') {
        this.$message.error('图片格式不支持，仅支持png/jpg')
        // this.yyzzList = []
        return false
      }
      return true
    },
    isPhone(content) {
      if (content === '') {
        return false
      }
      return /^1(3|4|5|6|7|8|9)\d{9}$/.test(content)
    },
    isEmail(content) {
      if (content === '') {
        return false
      }
      return /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/.test(content)
    },
    onSubmit() {
      var form = {}
      Object.assign(form, this.form, {
        server_name: this.server_name,
        trade_title: this.trade_title,
        trade_rate: this.trade_rate,
        qualifications_desc: this.qualifications_desc,
        store_city: this.store_city,
        bank_city: this.bank_city
      })
      var imgs = []
      this.qualifications.forEach((item) => {
        imgs.push(item.url)
      })
      form.qualifications = imgs.join(',')
      doSubmit(form).then(res => {
        // this.$message.success(res.message)
        this.$confirm(res.message, '提示', {
          confirmButtonText: '确定',
          showClose: false,
          showCancelButton: false,
          closeOnClickModal: false,
          closeOnPressEscape: false,
          type: 'success'
        }).then(() => {
          this.$router.replace({
            name: 'H5JinjianWxpayResult',
            query: { shop_id: this.form.shop_id }
          })
        })
      })
    },
    onPickerBankCityFinish(e) {
      this.bank_city = e.selectedOptions[0].text + ' / ' + e.selectedOptions[1].text
      this.$set(this.form, 'bank_address_code', e.value)
      this.showPickerBankCity = false
    },
    onPickerStoreCityFinish(e) {
      this.store_city = e.selectedOptions[0].text + ' / ' + e.selectedOptions[1].text
      this.$set(this.form, 'biz_address_code', e.value)
      this.showPickerStoreCity = false
    },
    onPickerIdcardTimeStartFinish(e) {
      const date = this.timeFormat(e)
      this.$set(this.form, 'card_period_begin', date)
      this.showPickerIdcardTimeStart = false
    },
    onPickerIdcardTimeEndFinish(e) {
      const date = this.timeFormat(e)
      this.$set(this.form, 'card_period_end', date)
      this.showPickerIdcardTimeEnd = false
    },
    timeFormat(e) {
      const time = new Date(e)
      const year = time.getFullYear()
      var month = time.getMonth() + 1
      var day = time.getDate()
      month = month < 10 ? '0' + month : month
      day = day < 10 ? '0' + day : day

      return year + '-' + month + '-' + day
    },
    toWxpay() {
      this.$router.replace({
        name: 'H5JinjianWxpay',
        query: { shop_id: this.form.shop_id }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .page {
    background-color: #3cb275;
    position: relative;
    .btn-towxpay {
      position: absolute;
      width: 110px;
      height: 66px;
      left: 10px;
      top: 10px;
      background: transparent;
      z-index: 1;
    }
  }
  .form {
    padding: 0 10px 10px 10px;
    .desc {
      color: #999;
      font-size: 12px;
      width: 100%;
      line-height: 18px;
      padding: 5px 0;
    }
  }
</style>
<style lang="scss">
  .box-step {
    padding: 20px 0;
  }
  .el-step__head.is-success {
    color: #fff;
    border-color: #fff;
    .el-step__icon.is-text {
      background: #3cb371;
    }
    .el-step__icon-inner.is-status {
      transform: scale(0.8);
    }
  }
  .el-step__head.is-process {
    color:#fff;
    .el-step__icon.is-text {
      background-color: #3cb275;
      color: #3cb275;
    }
  }
  .el-step__head.is-wait {
    color: #3f784d;
    .el-step__icon.is-text {
      background-color: #3f784d;
      border-color: #3f784d;
    }
  }
  .el-step__icon.is-text {
    border: 1px solid #fff;
    background: #fff;
    width: 14px;
    height: 14px;
    font-size: 12px;
    overflow: hidden;
  }
  .el-step__icon-inner {
    font-weight: normal;
  }
  .el-step__title {
    font-size: 12px;
    font-weight: 100;
  }
  .el-step__title.is-success {
    color: #fff;
  }
  .el-step__title.is-process {
    color: #fff;
    font-weight: bold;
  }
  .el-step__title.is-wait {
    color: #ddd;
  }
  .el-step.is-horizontal .el-step__line {
    background: rgba(63, 120, 77, 0.9);
    height: 1px;
  }
  .el-step__head.is-success .el-step__line {
    background: rgba(255,255,255,0.5);
  }
  .el-step__line-inner {
    display: none;
  }

  .el-message {
    max-width: 96%;
    min-width: 80% !important;
  }
  .el-message-box {
    width: 80%;
  }

  .form-block {
    background-color: #fff;
    padding: 0 20px 15px 20px;
    margin-bottom: 10px;
  }
  .form-block-hd {
    height: 48px;
    background: #fff;
    font-weight: bold;
    font-size: 15px;
    padding: 16px 10px;
    span {
      padding-left: 7px;
      border-left: 3px solid #44b549;
    }
  }
  .form-block__title {
    margin: 0;
    padding: 12px 0 12px;
    color: #333;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
  }
  .box-input {
    padding: 0 0 10px 0;
  }
  .catename {
    line-height: 44px;
    color: #04BE02;
    font-size: 14px;
    background: #f3f6f9;
    text-align: center;
  }
  .van-uploader {
    margin-left: 0;
  }
  .van-cell {
    padding: 0;
    border: 1px solid #eee;
    background: #f6f6f6;
    align-items: center;
    .van-field__value {
      padding: 5px 10px;
    }
  }
  .van-cell::after {
    border-bottom: none;
  }
  .van-uploader__upload {
    background-color: #F6F6F6;
    border: 1px solid #eee;
  }

  /*
  .van-checkbox {
    width: 150px;
    margin: 5px 0 5px 0;
  }
  .van-checkbox__icon {
    font-size: 14px;
  }
  .van-checkbox__icon--checked .van-icon {
    background-color: #3cb275;
    border-color: #3cb275;
  }
  .van-checkbox__icon--round .van-icon {
    border-radius: 0;
  }
  .van-checkbox__label {
    margin-left: 6px;
    color: #666;
    line-height: 1em;
    font-size: 14px;
  }
  */
  .van-radio {
    font-size: 15px;
  }
  .van-radio__icon {
    font-size: 16px;
  }
  .van-radio__icon--checked .van-icon {
    background-color: #3cb275;
    border-color: #3cb275;
  }
  .van-cell__right-icon {
    margin-right: 8px;
  }
  .van-button--info {
    background: #3cb275;
    border-color: #fff;
    font-size: 16px;
    border-radius: 0;
  }
</style>
